<!--
 * hi-radio - 单选框
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="page-view">
        <!-- 基础使用 -->
        <module-demo title="基础使用" tips="单选组件需要放到 hi-radio-group 组件中使用">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio label="默认样式" value="1"></hi-radio>
                <hi-radio label="显示边框" value="2" border></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 主题 -->
        <module-demo title="主题">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio v-for="item in options" :key="item.value" label="主题" :value="item.value" :theme="item.theme"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 镂空 -->
        <module-demo title="镂空">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio v-for="item in options" :key="item.value" label="镂空" :value="item.value" :theme="item.theme" plain></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 浅化 -->
        <module-demo title="浅化">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio v-for="item in options" :key="item.value" label="浅化" :value="item.value" :theme="item.theme" tint></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 边框+主题+浅化 -->
        <module-demo title="边框+主题+浅化">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio v-for="item in options" :key="item.value" label="边框+主题+浅化" :value="item.value" :theme="item.theme" tint border></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 方形单选框 -->
        <module-demo title="方形单选框">
            <hi-radio-group v-model="checkedValue1">
                <hi-radio v-for="item in options" :key="item.value" label="方形单选框" :value="item.value" :theme="item.theme" plain square></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 禁用状态 -->
        <module-demo title="禁用状态">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="禁用状态" value="1" :disabled="true" theme="primary" tint border></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义边框颜色 -->
        <module-demo title="自定义边框颜色">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义边框颜色" value="1" border inactiveBorderColor="#9900ff" activeBorderColor="#ff0000"></hi-radio>
                <hi-radio label="自定义边框颜色" value="2" border inactiveBorderColor="#9090ff" activeBorderColor="#00ff00"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义状态色 -->
        <module-demo title="自定义状态色">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义状态色" value="1" inactiveColor="#ff0000" activeColor="#9900ff"></hi-radio>
                <hi-radio label="自定义状态色" value="2" inactiveColor="#ff9900" activeColor="#00ff99"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义文字颜色 -->
        <module-demo title="自定义文字颜色">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义文字颜色" value="1" labelColor="#ff0000" activeLabelColor="#9900ff"></hi-radio>
                <hi-radio label="自定义文字颜色" value="2" labelColor="#ff9900" activeLabelColor="#00ff99"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义图标颜色 -->
        <module-demo title="自定义图标颜色">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义图标颜色" value="1" iconColor="#ff0000"></hi-radio>
                <hi-radio label="自定义图标颜色" value="2" iconColor="#ff9900"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义框框大小 -->
        <module-demo title="自定义框框大小">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义框框大小" value="1" size="26px"></hi-radio>
                <hi-radio label="自定义框框大小" value="2" size="26px"></hi-radio>
            </hi-radio-group>
        </module-demo>

        <!-- 自定义图标大小 -->
        <module-demo title="自定义图标大小">
            <hi-radio-group v-model="checkedValue2">
                <hi-radio label="自定义图标大小" value="1" iconSize="20px"></hi-radio>
                <hi-radio label="自定义图标大小" value="2" iconSize="20px"></hi-radio>
            </hi-radio-group>
        </module-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 选项
    const options = ref([
        { label: "鸡蛋", value: 1, disabled: false, theme: "primary" },
        { label: "鸭蛋", value: 2, disabled: true, theme: "success" },
        { label: "鹅蛋", value: 3, disabled: false, theme: "warning" },
        { label: "大米", value: 4, disabled: true, theme: "error" },
        { label: "小米", value: 5, disabled: false, theme: "info" }
    ]);

    // 选中值
    const checkedValue1 = ref(1);
    const checkedValue2 = ref(2);
</script>

<style lang="scss" scoped></style>
